<template>
    <div id="nav">
        <div class="aside-nav">
            <el-menu
                :default-active="$route.matched[1].path"
                class="el-menu-vertical"
                :collapse="isCollapse"
                :collapse-transition="false"
                router
            >
                <el-submenu index="1">
                    <template slot="title">
                        <img
                            :src="contentImg"
                            alt=""
                            class="title-img"
                        >
                        <span slot="title">内容管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/articleManage">
                            文章管理
                        </el-menu-item>
                        <el-menu-item index="/commentManage">
                            评论管理
                        </el-menu-item>
                        <el-menu-item index="/typeManage">
                            类型管理
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <img
                            :src="statisticsImg"
                            alt=""
                            class="title-img"
                        >
                        <span slot="title">统计信息</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/typeStatistics">
                            类型统计
                        </el-menu-item>
                        <el-menu-item index="/countStatistics">
                            排名统计
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/userManage">
                    <img
                        :src="userImg"
                        alt=""
                        class="title-img"
                    >
                    <span slot="title">个人信息</span>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
    import contentImg from 'assets/images/content.png';
    import userImg from 'assets/images/user.png';
    import statisticsImg from 'assets/images/statistics.png';
    export default {
        props: {
            isCollapse: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                contentImg,
                userImg,
                statisticsImg
            };
        },
        mounted () {
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
#nav {
    position: absolute;
    width: 230px;
    height: 100%;
    transition: all .2s;
    overflow: hidden;
    background: linear-gradient(#17CAEE, #1869ec);
    .aside-nav {
        height: 100%;
        margin-right: -5px;
        overflow-x: hidden;
        .title-img {
            margin-right: 10px;
        }
    }
}
</style>
<style lang="less">
@import '~assets/styles/variable';
.el-menu--popup{
    background: linear-gradient(#5ec9df, #1869ec) !important;
}
.el-menu{
    background-color: transparent;
    border:none;
    .el-submenu__title,.el-menu-item{
        display: flex;
        align-items: center;
        min-height: 60px!important;
        line-height: 20px!important;
        white-space: inherit;
        color: @color-text-main;
        i {
            color:  @color-text-main;;
        }
        &:hover,&:focus {
            background: linear-gradient(#17CAEE, #0FB5CE) !important;
        }
        &>div{
            display: flex!important;
            align-items: center;
        }
    }
    &>.el-menu-item.is-active , &>.is-active .el-submenu__title,.el-menu-item.is-active{
        background: linear-gradient(#17CAEE, #0FB5CE) !important;
    }
}
.el-menu-vertical:not(.el-menu--collapse) {
    width: 230px;
    .el-submenu__title{
        height: auto;
    }
    .el-menu--inline {
        .el-menu-item,.el-submenu__title{
            height: 30px;
            min-height: 30px!important;
            font-size: 12px;
            &:hover,&:focus{
                background: #eef9f9 !important;
                color: #22BCAC!important;
            }
        }
        .el-menu-item.is-active{
            background: #eef9f9 !important;
            color: #22BCAC;
        }
    }
    .el-submenu .el-menu-item{
        min-width: 230px;
    }
    .el-submenu__icon-arrow{
        right: 15px;
    }
}
</style>
